<template>
    <popup
        title="开通会员"
        :show="true"
        :loading="loading"
        :async-close="true"
        :confirmButtonText="button"
        width="400px"
        @close="emits('close')"
        @confirm="handleSubmit"
    >
        <div class="p-6 pb-0">
            <div class="flex justify-right mb-4">
                <el-radio-group v-model="calendar" size="large">
                    <el-radio-button value="month">按月</el-radio-button>
                    <el-radio-button value="year">按年</el-radio-button>
                    <el-radio-button value="day">按日</el-radio-button>
                    <el-radio-button value="perpetual">永久</el-radio-button>
                </el-radio-group>
            </div>
            <div class="text-xs text-tx-placeholder mb-4">
                开通将会同步创建订单记录，退订请到财务处理。
            </div>
            <el-form ref="formRef" :model="formData" :rules="formRules" label-width="80px">
                <el-form-item label="订阅套餐" prop="pricing_id">
                    <el-select
                        v-model="formData.pricing_id"
                        placeholder="请选择"
                        @change="handleChange"
                    >
                        <el-option
                            v-for="(item, index) in packageLists"
                            :key="index"
                            :label="item.name"
                            :value="item.pricing_id"
                            :disabled="!item.is_purchase"
                        >
                            {{ item.name }}
                            <el-tag
                                v-if="item.my_version"
                                type="success"
                                size="small"
                            >
                                当前
                            </el-tag>
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="实付金额" prop="paid_amount">
                    <el-input v-model="formData.paid_amount" placeholder="0.00" />
                </el-form-item>
            </el-form>
        </div>
    </popup>
</template>

<script setup lang="ts">
import feedback from "@/utils/feedback"
import marketSubscribeApi from '@/api/market/subscribe'

const emits = defineEmits(['success', 'close'])
const props = defineProps({
    user_id: {
        type: Number,
        default: 0
    }
})

const button = ref('确定开通')
const calendar = ref('month')
const packageLists: any = ref([])

const loading = ref<boolean>(false)
const formData = reactive<any>({
    user_id: props.user_id,
    pricing_id: '',
    paid_amount: ''
})

// 表单规则
const formRules = reactive({
    pricing_id: [
        { required: true, message: '请选择要开通的套餐', trigger: ['blur'] }
    ],
    paid_amount: [
        { required: true, message: '请填写收取客服的费用', trigger: ['blur'] }
    ]
})

/**
 * 选择套餐
 */
const handleChange = (id: number) => {
    let data = null
    for (let i=0; i < packageLists.value.length; i++) {
        if (packageLists.value[i].pricing_id === id) {
            data = packageLists.value[i]
            break
        }
    }

    if (!data) {
        feedback.msgError('数据异常,请刷新页面!')
        return
    }

    if (data['my_version']) {
        button.value = '确认续费'
    } else {
        button.value = '确认升级'
    }

    formData.paid_amount = data.sell_price
}

/**
 * 提交开通
 */
const handleSubmit = () => {
    feedback.confirm('确定开通吗?').then(async () => {
        loading.value = true
        await marketSubscribeApi.open({
            user_id: props.user_id,
            pricing_id: formData.pricing_id,
            paid_amount: parseFloat(formData.paid_amount||'0')
        }).finally(() => {
            loading.value = false
        })

        feedback.msgSuccess('开通成功')
        emits('success')
    }).catch(() => {})
}

watch(
    () => calendar.value,
    async () => {
        packageLists.value = await marketSubscribeApi.pricing(
            props.user_id,
            calendar.value
        )
    }, { immediate: true }
)
</script>
